<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="register.css" type="text/css">

    <!-- <style>
        /* label{
            display: inline-block;
            width: 100px;
            text-align: right;
        } */
    label {
        width: 150px;
        text-align: left;
        display: inline-block;
    }

    /* 如何覆盖标签的继承？ */
    #male {
        width: 5px;
    }

    </style> -->
    <script>
        function displayResult() {
            alert("注册成功!")
        }
    </script>
</head>

<body>

    <div>
        <form class="contact_form" action="#" method="post">
            <ul>
                <li>
                    <h2>用户注册</h2>
                </li>
                <li class="usually">
                    <span class="icon"> 昵称：</span>
                    <input type="text" name="name" class="jl" maxlength="6">
                </li>

                <li class="usually">
                    <span class="icon"> 注册邮箱：</span>

                    <input type="text" name="emal" class="jl" maxlength="20" required placeholder="wangci@qq.com">
                </li>

                <li class="usually">
                    <span class="icon"> 密码：</span>
                    <input type="password" name="mm" class="jl" maxlength="20">
                </li>

                <li>
                    <span>  性别：</span>
                    <input type="radio" name="sex" id="male">
                    <label for="male">男</label>
                    <input type="radio" name="sex" id="female">
                    <label for="female">女</label>
                </li>

                <li class="usually">
                    <span class="icon">年龄：</span>
                    <input type="text" name="age" maxlength="3">
                </li>

                <li>
                    <span> 兴趣爱好：</span>

                    <div>
                        <input type="checkbox" id="football" name="hobby[]">
                        <label for="football">足球</label>
                        <input type="checkbox" id="dance" name="hobby[]">
                        <label for="dance">跳舞</label>
                        <input type="checkbox" id="swim" name="hobby[]">
                        <label for="swim">游泳</label>
                        <input type="checkbox" id="sing" name="hobby[]">
                        <label for="sing">唱歌</label>
                        <input type="checkbox" id="run" name="hobby[]">
                        <label for="run">跑步</label>
                        <input type="checkbox" id="yj" name="hobby[]">
                        <label for="yj">瑜伽</label>
                    </div>
                </li>

                <li class="usually">
                    <span class="icon"> 自我介绍:</span>
                    <textarea name="content" id="content" class="jl" cols="30" rows="10">自我介绍</textarea>
                </li>

                <li class="footer">

                    <form>
                        <input type="submit" value="立即注册" onclick="displayResult()">
                    </form>
                </li>
            </ul>

        </form>
    </div>
</body>

</html>